<template>
  <!-- 举报弹窗 -->
  <!-- <n-modal
    v-if="tmpComment"
    class="comment-modal"
    v-model:show="showReport"
    preset="dialog"
    positive-text="确认"
    @positive-click="confirmReport"
    negative-text="再想想"
    :title="
      tmpComment.username + '：' + tmpComment.content.substring(0, 6) + '...'
    "
    size="huge"
    type="warning"
  >
    <n-text>举报理由：</n-text>
    <n-input
      type="textarea"
      placeholder="请输入举报理由"
      v-model:value="reportReason"
    ></n-input>
  </n-modal> -->
  <!-- 回复弹窗 -->
  <n-modal
    v-if="tmpComment"
    class="comment-modal"
    v-model:show="showReply"
    preset="dialog"
    :showIcon="false"
    positive-text="回复"
    @positive-click="confirmReply"
    negative-text="下次一定"
    :title="
      tmpComment.username + '：' + tmpComment.content.substring(0, 12) + '...'
    "
    size="huge"
  >
    <n-text>回复内容：</n-text>
    <n-input
      type="textarea"
      placeholder="请输入回复内容"
      v-model:value="replyContent"
    ></n-input>
  </n-modal>
  <div class="comment-card">
    <div class="comment-control">
      <div class="chip-col" size="large">
        <!-- 赞 -->
        <n-button
          class="chip"
          :type="item.likeStatus === 1 ? 'success' : ''"
          ghost
          :bordered="false"
          @click="likeAnswer(1, item)"
        >
          <transition :name="item.liked ? 'zoom' : ''" mode="out-in">
            <n-icon :size="30" :color="item.likeStatus === 1 ? '' : '#ccc'">
              <like-icon-a></like-icon-a>
            </n-icon>
          </transition>
        </n-button>
        <div>
          {{ item.likeCount }}
        </div>
        <!-- 踩 -->
        <n-button
          class="chip"
          :ghost="item.solved ? false : true"
          :bordered="false"
          :type="item.likeStatus === -1 ? 'error' : ''"
          @click="likeAnswer(-1, item)"
        >
          <n-icon :size="30" :color="item.likeStatus === -1 ? '' : '#ccc'">
            <dislike-icon-b></dislike-icon-b>
          </n-icon>
        </n-button>
        <n-icon v-if="item.adopt" color="#ffa900" size="large">
          <Star></Star>
        </n-icon>
      </div>
    </div>
    <div class="comment-info">
      <n-space justify="space-between" align="center">
        <n-space align="center" class="username" :size="8">
          <n-avatar :src="item.avatar" size="small" circle></n-avatar>
          {{ item.username }}
        </n-space>
        <div class="comment-time">
          <n-time :time="new Date(item.commentTime)" type="datetime" />
        </div>
      </n-space>
      <div class="comment-content">
        {{ item.content }}
        <!-- 悬浮显示区 -->
        <div class="comment-action">
          <!-- 采纳 -->
          <n-button
            class="action"
            type="success"
            @click="best"
            v-if="isHost && !solved"
          >
            采纳
          </n-button>
          <!-- <n-button class="action" type="error" @click="report(item)">
            举报
          </n-button> -->
          <n-button class="action" type="primary" @click="reply(item)">
            回复
          </n-button>
        </div>
      </div>
      <div
        v-if="item.replyList.length > 0 && !item.showAll"
        @click="showAll(item)"
        style="cursor: pointer; font-size: 0.8em; color: #999; margin-top: 10px"
      >
        查看全部评论（{{ item.replyList.length }}）
      </div>
      <!-- 回答的回复区 -->
      <div class="comment-reply">
        <transition name="fade" mode="out-in" :duration="120">
          <div v-if="item.showAll">
            <div
              v-for="replyItem in item.replyList"
              :key="replyItem.id"
              class="reply-piece mt-1"
            >
              <div style="width: 100%">
                <n-tag size="small" round :bordered="false">
                  <template #avatar>
                    <n-icon>
                      <reply-icon></reply-icon>
                    </n-icon>
                  </template>
                  {{ '@' + replyItem.replyTarget }}
                </n-tag>
                <span style="font-size: 1.05em; font-weight: bold"
                  >&nbsp;{{ replyItem.username }}:&nbsp;</span
                >
                <span>{{ replyItem.content }} </span>
                <span
                  class="comment-time"
                  style="font-size: 0.8em; float: right"
                  justify="end"
                >
                  {{ replyItem.commentTime }}
                </span>
              </div>
              <div class="comment-action">
                <!-- <n-button
                  class="action"
                  type="error"
                  @click="report(replyItem)"
                >
                  举报
                </n-button> -->
                <n-button
                  class="action"
                  type="primary"
                  @click="reply(replyItem)"
                >
                  回复
                </n-button>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  CaretUpSharp as LikeIconA,
  CaretDownSharp as DislikeIconB,
  Star
} from '@vicons/ionicons5'
import { ReplyOutlined as ReplyIcon } from '@vicons/material'

import api from '@/api/api'
const { Comment, Help } = api

const message = useMessage()
const props = defineProps({
  commentItem: Object
})
// 是否是问题发布者
const isHost = inject('isHost') || false
// const isHost = ref(false)
// 是否解决
const solved = inject('solved') || false
// const solved = ref(false)
const item = ref(props.commentItem)
const likeAnswer = (type, tmpItem) => {
  // -1 dislike
  // 0 -
  // 1 like
  if (type === 1) {
    if (tmpItem.likeStatus === 1) {
      tmpItem.likeStatus = 0
    } else {
      tmpItem.likeStatus = 1
    }
  } else {
    if (tmpItem.likeStatus === -1) {
      tmpItem.likeStatus = 0
    } else {
      tmpItem.likeStatus = -1
    }
  }
  Comment.likeAnswer({
    id: tmpItem.id,
    likeStatus: tmpItem.likeStatus
  }).then((res) => {
    console.log('🚀 ~ likeAnswer ~ res', res)
    if (res.success) {
      item.value.likeCount = res.data.likeCount
    } else {
      message.error('点赞失败')
    }
  })
}

// 举报
const report = (item) => {
  tmpComment.value = item
  showReport.value = true
}
const confirmReport = () => {
  Comment.report({
    id: tmpComment.value.id,
    type: 1,
    reportReason: reportReason.value
  }).then((res) => {
    if (res.success) {
      message.success('举报成功！')
    } else {
      message.info('举报错误')
    }
  })
}
// 回复
const reply = (item) => {
  tmpComment.value = item
  showReply.value = true
}

const confirmReply = () => {
  if (replyContent.value.length <= 0) {
    message.warning('回复不能为空！')
    return
  }
  Comment.reply({
    id: tmpComment.value.id,
    type: 1, // 1 is reply
    content: replyContent.value
  }).then((res) => {
    if (res.success) {
      message.success('回复成功！')
      reload()
    } else {
      message.info('回复错误')
    }
  })
}

const showAll = (item) => {
  item.showAll = true
}
const reload = inject('reload')

const best = () => {
  Help.bestAnswer({
    id: item.value.id
  }).then((res) => {
    if (res.success) {
      message.success('采纳成功')
      reload()
    } else {
      message.info('采纳失败')
    }
  })
}

const showReport = ref(false)
const showReply = ref(false)
const tmpComment = ref(null)
const reportReason = ref('')
const replyContent = ref('')
</script>

<style scoped lang="scss">
.comment-modal {
  width: 600px !important;
  height: 400px !important;
  .dialog-text {
    font-size: 0.9em;
    color: #666;
  }
}
.comment-info {
  width: 100%;
  min-height: 30px;
}
.comment-action {
  visibility: hidden;
  display: flex;
  width: 0;
  height: 100%;
  max-height: 40px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 100;
  transition: all 0.3s ease-out;
  .action {
    border: 1px solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex: 1;
    height: 100%;
  }
}
.comment-card {
  position: relative;
  display: flex;
  // min-height: 90px;
}
.reply-piece {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  &:hover {
    filter: opacity(90%);
    .comment-action {
      position: absolute;
      width: 25%;
      visibility: visible;
      display: flex;
      align-items: center; /* 垂直居中 */
    }
  }
}

.comment-content {
  position: relative;
  margin-top: 5px;
  font-size: 1em;
  line-height: 23px;
  word-break: break-all;
  padding: 5px;
  overflow: hidden;
  &:hover {
    filter: opacity(90%);
    .comment-action {
      width: 25%;
      visibility: visible;
      display: flex;
      align-items: center; /* 垂直居中 */
    }
  }
}
@media screen and (max-width: 768px) {
  .comment-content:hover .comment-action {
    width: 65%;
  }
  .reply-piece:hover .comment-action {
    width: 50%;
  }
}
.comment-control {
  width: 40px;
  .chip-col {
    height: 90px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-evenly; /* 水平均匀分布 */
    align-items: center; /* 垂直居中 */
    flex-direction: column;
    margin: -5px 15px 10px 0;
    button {
      max-height: 30px;
    }
  }
}

.comment-right {
  position: relative;
  color: rgb(136, 136, 136);
  width: 100%;
}

.comment-reply {
  margin-left: 2em;
  margin-top: 8px;
  position: relative;
  font-size: 0.9em;
  margin-bottom: 15px;
}
@media screen and (max-width: 992px) {
  .comment-reply {
    margin-left: -15px;
    position: relative;
    font-size: 0.9em;
    padding-left: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
  }
}

.comment-time {
  color: #999;
}

.comment-options {
  margin: 1px 0px 1px 10px;
}

.comment-options i {
  cursor: pointer;
}

.comment-date {
  font-size: 13px;
  color: rgb(136, 136, 136);
  margin: 4px 0;
}

.showReply {
  font-size: 14px;
  color: #8590a6;
  border-radius: 5px;
  margin-right: 10px;
  cursor: pointer;
  :hover {
    color: #76839b;
  }
}
.username {
  cursor: pointer;
  font-size: 1.1em;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-leave-from,
.fade-enter-to {
  opacity: 1;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s;
}

.zoom-enter-active,
.zoom-leave-active {
  transition: all 0.15s cubic-bezier(0.42, 0, 0.34, 1.55);
}

.zoom-enter,
.zoom-leave-to {
  transition: all 0.15s ease-out;
  transform: scale(1);
}

.zoom-enter-to,
.zoom-leave {
  transition: all 0.2s ease-out;
  transform: scale(1.05);
}
</style>
